﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript学习002</title>
<script>
//通过鼠标的事件来改变网页内容
	click_count=0;
	//img_clicked=true;
		show_txt='';	
	function MouseOver(obj){ //鼠标悬停时更改标签内容
		document.getElementById('mouse_move').innerHTML='鼠标在此！';
	}
	
	function MouseOut(obj){ //鼠标未悬停时显示的标签内容
		document.getElementById('mouse_move').innerHTML='鼠标未在!';
	}
	
	function MouseClick(obj){ //鼠标单击时显示的内容

		if (click_count<5){
			show_txt=show_txt+'  '+click_count;
			click_count+=1;
		}
		else {
			show_txt='';	
			click_count=0;	
		}
		document.getElementById('mouse_click').innerHTML=show_txt;

	}
	
	function MouseDown(obj){ //鼠标按下时更改内容
		document.getElementById('change_img').src='images/change_01.gif';
		obj.style.height='220px'
	}
	
	function MouseUp(obj){ //鼠标松开时显示的内容
		document.getElementById('change_img').src='images/change_02.gif';
		obj.style.height='220px'
	}
	
	function ImgOut(obj){
		document.getElementById('change_img').src='';
		obj.style.height='20px'	
	}
	

</script>

</head>

<body>
<div onmouseover="MouseOver(this)" onmouseout="MouseOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">
  <p id="mouse_move">鼠标放置</p>
</div>
<br>
<div onclick="MouseClick(this)"style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">
	
  <p id="mouse_click">鼠标单击</p>
</div>
<br>
<div onmousedown="MouseDown(this)" onmouseup="MouseUp(this)" onmouseover="ImgOver(this)" onmouseout="ImgOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">
  <img id="change_img" src="" alt="按下鼠标更换图像" />
  <p id="mouse_down_up">鼠标按下</p>
</div>

</body>
</html>
